<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <title>支付页面-小米商城</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link type="text/css" rel="styleSheet" href="/css/bootstrap.css"/>
    <script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>

</head>
<body>
<!-- start header -->
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a href="/buyer/index">
        <div class="logo fl"></div>
    </a>

    <div class="wdgwc fl ml40">支付页面</div>
    <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
    <div class="dlzc fr">
        <ul>
            <li><c:if test="${loginInfo!=null}"><a href="/buyer/selfInfo">欢迎${loginInfo.loginName}</a></c:if><c:if test="${loginInfo eq null}"><a href="/login.jsp">登录</a></c:if></li>
            <li>|</li>
            <li><c:if test="${loginInfo!=null}"><a href="/logout">注销</a></c:if><c:if test="${loginInfo eq null}"><a href="/register">注册</a></c:if></li>
            <li>|</li>
            <li><a href="">消息通知</a></li>
        </ul>

    </div>
    <div class="clear"></div>
</div>
<div class="xiantiao"></div>
<div class="gwcxqbj">
    <div class="gwcxd center">
        <div class="content-title">
            确认收货信息
        </div>
        <ul>

            <li>
                <table border="1" class="peo_tab" style="width:1110px;" cellspacing="0" cellpadding="0">

                    <c:forEach items="${addressList}" var="list">
                        <tr><td class="p_td" width="160" >
                            <input type="radio" name="selectAddress"
                                   <c:if test="${list.isDefault == 1}">checked</c:if>
                                   value="${list.address}"></td>
                            <td>${list.address}
                                <button type="button" class="btn btn-link" onclick="delAddress(${list.id})" style="float:right;">删除地址</button>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
            </li>

        </ul>

        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            添加地址
        </button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <form action="/buyer/orderAddress" method="post">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            添加地址信息
                        </h4>
                    </div>
                    <div class="modal-body">
                        <select class="form-control" id="pro" name="pro" class="pro">
                            <option>请选择省级</option>
                            <c:forEach items="${threeLinks}" var="list1">
                                <option value="${list1.id}">${list1.name}</option>
                            </c:forEach>
                        </select><br>
                        <select id="city" name="city" class="form-control">
                            <option>请选择市级</option>
                            <c:forEach items="${threeLinks}" var="list1">
                                <c:forEach items="${list1.threeLinks}" var="list2">
                                    <option value="${list2.id}">${list2.name}</option>
                                </c:forEach>
                            </c:forEach>
                        </select><br>
                        <select class="form-control" id="area" name="area">
                            <option>请选择县/区级</option>
                            <c:forEach items="${threeLinks}" var="list1">
                                <c:forEach items="${list1.threeLinks}" var="list2">
                                    <c:forEach items="${list2.threeLinks}" var="list3">
                                        <option value="${list3.id}">${list3.name}</option>
                                    </c:forEach>
                                </c:forEach>
                            </c:forEach>
                        </select><br>
                        <input class="form-control" type="text" placeholder="请输入详细地址信息" name="address_detail"><br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <input class="btn btn-default" type="submit" value="确认添加">
                    </div>
                </div><!-- /.modal-content -->
                </form>
            </div><!-- /.modal -->
        </div>

        <div class="addAddress">
            <%--<form>
                <input type="text" value="weiuwqoe"/>
                <input type="text" value="weiuwqoe"/>
                <input type="text" value="weiuwqoe"/>
            </form>--%>
        </div>
        <div class="commodity_information">
            <h3>商品及信息</h3>
            <table class="table table-hover" border="2">
                <tr class="active">
                    <th width="80px">商品ID</th>
                    <th width="100px">图片</th>
                    <th width="160px">名称</th>
                    <th>数量</th>
                    <th width="40px">单价</th>
                    <th>总价</th>
                </tr>
                <c:forEach items="${cartList}" var="list" varStatus="status" begin="0">
                    <tr  class="
            <c:if test="${status.index % 4 eq 1}">success</c:if>
            <c:if test="${status.index % 4 eq 2}">warning</c:if>
            <c:if test="${status.index % 4 eq 3}">danger</c:if>
            <c:if test="${status.index % 4 eq 0}">info</c:if>
            " id="dbl_tr${list.id}">
                        <td>${list.product.id}</td>
                        <td><img src="/image/${list.product.fileImg}" width="80" height="80"/></td>
                        <td>${list.product.name}</td>
                        <td>${list.quantity}</td>
                        <td>${list.product.price}</td>
                        <td>${list.product.price}</td>

                    </tr>
                </c:forEach>
            </table>
        </div>




    </div>
    <div class="jiesuandan mt20 center">
        <div class="settlement">
            <h3>结算信息</h3>
            <div>
                <div class="settlement_information">
                    <p>商品总计：<span>￥${sum}</span></p>
                    <p>运费：<span>￥10</span></p>
                    <p>优惠：<span>-￥0</span></p>
                </div>

                <div class="clear"></div>
            </div>

            <div class="settlement_money">
                <p>应付：<span class="sum">￥${allSum}</span></p>
                <div class="clear"></div>
            </div>
            <div>

                <!-- Small modal -->
                <button type="button" class="btn btn-primary" onclick="payment()">确认订单</button>

            </div>
        </div>
        <div class="clear"></div>
    </div>

</div>


<!-- footer -->
<footer class="center">

    <div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
    <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>
    <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
</footer>
<script type="text/javascript">
    // jQuery传参时需传递具体的对象属性值
    function next(pageNum,pageSize,endRow) {
        if(pageNum==endRow)     pageNum=pageNum;
        else    pageNum+=1;
        window.location.href="/buyer/car/"+pageNum;
    }

    function pre(pageNum,pageSize) {
        if(pageNum==1)     pageNum=pageNum;
        else    pageNum-=1;
        window.location.href="/buyer/car/"+pageNum;
    }

    function firstPage(pageSize){
        window.location.href="/buyer/car/"+1;
    }

    function lastPage(pages,pageSize){
        window.location.href="/buyer/car/"+pages;
    }

    function topay(){
        window.location.href="/buyer/orderDetail";
    }

    function delAddress(id){
        window.location.href="/buyer/deleteAddress/"+id;
    }

    function payment(){
        var address=$("input[name='selectAddress']:checked").val();
        var sum=$(".sum").text();
        sum=sum.substring(1);
        alert("支付成功！");
        window.location.href="/buyer/payment/"+address+"/"+sum;

    }

    $(function(){
        $("#pro").change(function(){
            var id=$(this).val();
            $.ajax({
                url:"/threelink/findCityByPid/"+id,
                type:"POST",
                dataType:"Json",
                success:function(data){
                    //更新city
                    var content="";
                    for(var i=0;i<data.length;i++){
                        var city=data[i];
                        content+="<option value='"+city.id+"'>"+city.name+"</option>";
                    }
                    $("#city").html(content);
                }
            })
        });

        $("#city").change(function(){
            var id=$(this).val();
            $.ajax({
                url:"/threelink/findAreaByCid/"+id,
                type:"POST",
                dataType:"Json",
                success:function(data){
                    var content="";
                    for(var i=0;i<data.length;i++){
                        var area = data[i];
                        content += "<option value='"+area.id+"'>"+area.name+"</option>";
                    }
                    $("#area").html(content);
                }
            });
        });
    });

</script>

</body>
</html>
